﻿@{
    ViewBag.Title = "Form";
    Layout = "~/Views/Shared/_Form.cshtml";
}
<script>
    var keyValue = $.request("keyValue");
    var spaceId = $.request("spaceId");
    var F_SiteId = $.request("F_SiteId");
    $(function () {
        getItemList();
        $("#F_SpaceId").val(spaceId);
        $("#F_SiteId").val(F_SiteId);
        if (!!keyValue) {
            $.ajax({
                url: "/SiteManage/ServicesCost/GetFormJson",
                data: { keyValue: keyValue },
                dataType: "json",
                async: false,
                success: function (data) {
                    $("#form1").formSerialize(data.servicesCostEntity);
                    $("#form2").formSerialize(data.photosEntity);

                    $("#path").attr("src", "http://storage.yunspace.com.cn/" + data.photosEntity.F_path);
                }
            });
        }
    });
    function submitForm() {
        if (!$('#form1').formValid()) {
            return false;
        }
        var params = {
            ServicesOutput: JSON.stringify({
                servicesCostEntity: $("#form1").formSerialize(),//增值服务
                photosEntity: $("#form2").formSerialize()//图片信息
            })
        };
        $.submitForm({
            url: "/SiteManage/ServicesCost/SubmitForm?keyValue=" + keyValue,
            param: params,
            success: function () {
                top.frames[F_SiteId].window.$("#ServerGridList").trigger("reloadGrid");
            }
        })
    }


    function getItemList() {
        $.ajax({
            url: "/SiteManage/Site/GetItemListJson",
            dataType: "json",
            async: false,
            success: function (data) {
                selectControl(data)
            }, error: function (XMLHttpRequest, textStatus, errorThrown) {
                console.log(XMLHttpRequest);
                console.log(textStatus);
                console.log(errorThrown);
            }
        });
    }
    function selectControl(ItemList) {
        var ServicesCost = ItemList.ServicesCost;
        for (var i = 0; i < ServicesCost.length; i++) {
            $("#F_CostId").append("<option value='" + ServicesCost[i].F_ItemCode + "'>" + ServicesCost[i].F_ItemName + "</option>");
        }
        $("#F_CostId").bindSelect()//配套服务

        var units = ItemList.units;
        for (var i = 0; i < units.length; i++) {
            $("#F_CostUnits").append("<option value='" + units[i].F_ItemCode + "'>" + units[i].F_ItemName + "</option>");
        }
        $("#F_CostUnits").bindSelect()//价格单位
    }

    var xhr;
    function uploadSend() {
        var data = new FormData();
        var item = document.getElementById("imgfile");
        
        if (item != null) {
            var file = item.files[0];
            fileSize = file.size;
            fileSize = Math.round(fileSize / 1024 * 100) / 100; //kb
            if (fileSize > 512) {
                alert('上传图片请勿超过5mb');
                return false;
            }
            data.append(file.name, file);
            var xhr = new XMLHttpRequest();
            xhr.onload = function () {
                data = JSON.parse(xhr.responseText);
                if (data.state == '1') {
                    $.modalAlert("图片上传成功！", "warning");
                    $("#F_path").val(data.path);
                    $("#path").attr("src", data.data);
                    $("#name").val(data.name);

                    item.value = "";
                } else {
                    $.modalAlert("上传失败！", "warning");
                }
            };
            xhr.onerror = function (err) {
                console.error(err);
            };
            xhr.open('post', '/SiteManage/Site/UploadAttachment', true);
            xhr.send(data);
        }
    }
</script>

<form id="form1">
    <div style="padding-top: 20px; margin-right: 20px;">
        <table class="form">
            <tr>
                <th class="formTitle">增值服务</th>
                <td class="formValue">
                    <select id="F_CostId" name="F_CostId" class="form-control required">
                        <option value="">==请录入增值服务==</option>
                    </select>
                </td><td></td>
            </tr>
            <tr>
                <th class="formTitle">服务名称</th>
                <td class="formValue">
                    <input id="F_CategoryName" name="F_CategoryName" type="text" class="form-control required" placeholder="请录入服务名称" />
                </td><td></td>
            </tr>
            <tr>
                <th class="formTitle">价格（元）</th>
                <td class="formValue">
                    <input id="F_Cost" name="F_Cost" type="number" class="form-control required" placeholder="请录入费用" />
                </td><td></td>
            </tr>
            <tr>
                <th class="formTitle">价格单位</th>
                <td class="formValue">
                    <select id="F_CostUnits" name="F_CostUnits" class="form-control required">
                        <option value="">==请录入价格单位==</option>
                    </select>
                </td><td></td>
            </tr>
            <tr>
                <th class="formTitle">服务说明</th>
                <td class="formValue">
                    <input id="F_Content" name="F_Content" type="text" class="form-control required" placeholder="请录入意见" />
                    <input type="hidden" id="F_SiteId" name="F_SiteId" value="" />
                    <input type="hidden" id="F_SpaceId" name="F_SpaceId" value="" />
                </td><td></td>
            </tr>
        </table>
    </div>
</form>
<form id="form2">
    <div style="margin-right: 20px;">
        <table class="form">
            <tr>
                <th class="formTitle">选择图片</th>
                <td class="formValue">
                    <input id="imgfile" type="file" accept="image/png,image/jpeg,image/gif" class="form-control required ">
                </td>
                <td>
                    <input type="button" onclick="uploadSend()" value="上传" class="btn btn-primary ">
                    <input type="hidden" id="F_Id" />
                    <input type="hidden" id="F_path" name="F_path" value="" />
                    <input type="hidden" id="name" name="name" value="" />
                </td>
            </tr>
            <tr>
                <th class="formTitle">图片</th>
                <td class="formValue">
                    <img src="" style="width:150px; height:100px;" id="path" alt="" />
                </td>
                <td></td>
            </tr>
        </table>
    </div>
</form>


